<!-- /templates/customers/account.liquid -->

<div class="page-width page-container">

  <header class="section-header">
    <h1>{{ 'customer.account.title' | t }}</h1>
  </header>

  <h2>{{ 'customer.orders.title' | t }}</h2>

  {% comment %}
    If we have past orders, loop through each one
  {% endcomment %}
  {% paginate customer.orders by 20 %}
    {% if customer.orders.size != 0 %}

      {% comment %}
        Responsive Table for small screens
      {% endcomment %}
      <table class="responsive-table">
        <thead>
          <tr>
            <th>{{ 'customer.orders.order_number' | t }}</th>
            <th>{{ 'customer.orders.date' | t }}</th>
            <th>{{ 'customer.orders.payment_status' | t }}</th>
            <th>{{ 'customer.orders.fulfillment_status' | t }}</th>
            <th>{{ 'customer.orders.total' | t }}</th>
          </tr>
        </thead>
        <tbody>
          {% for order in customer.orders %}
            <tr>
              <td data-label="{{ 'customer.orders.order_number' | t }}">{{ order.name | link_to: order.customer_url }}</td>
              <td data-label="{{ 'customer.orders.date' | t }}">{{ order.created_at | date: format: 'date' }}</td>
              <td data-label="{{ 'customer.orders.payment_status' | t }}">{{ order.financial_status_label }}</td>
              <td data-label="{{ 'customer.orders.fulfillment_status' | t }}">{{ order.fulfillment_status_label }}</td>
              <td data-label="{{ 'customer.orders.total' | t }}">{{ order.total_price | money }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>

    {% else %}

      <p>{{ 'customer.orders.none' | t }}</p>

    {% endif %}
    {% if paginate.pages > 1 %}
      {% include 'pagination' %}
    {% endif %}
  {% endpaginate %}

  <hr class="hr--clear">

  <h2>{{ 'customer.account.details' | t }}</h2>

  {{ customer.default_address | format_address }}

  <p><a href="{{ routes.account_addresses_url }}">{{ 'customer.account.view_addresses' | t }} ({{ customer.addresses_count }})</a></p>

</div>
